<template>
    <div class="player-wrapper">

      <div :id="playerId" class="player-holder"></div>

      <div class="src-head">
        <n-form
          ref="formRef"
          label-placement="left"
          label-width="auto"
          require-mark-placement="right-hanging"
          :style="{ maxWidth: '640px', margin: 'auto' }"
        >
          <n-form-item label="url" path="url">
            <n-input v-model:value="sourceUrl" placeholder="url" />
            <n-button strong secondary type="info" @click="changeSourceUrl">
              切换源
            </n-button>
          </n-form-item>
        </n-form>
      
      </div>
    </div>
</template>

<style scoped lang="scss">
.src-head{
  text-align: center;
  color: white;
  margin-top: 0.5rem;
}
.player-wrapper{
    /*margin: auto; 
    width: 100%; 
    padding: 0.2rem; */
    height: 100vh;  
    background-color: #000;
    display: flex; 
    flex-direction: column;

    .player-holder {
      margin: auto;
      
    }
}
</style>

<script src="./xgplayer.js">
</script>